<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>htmlcss 阶段</title>
    <style>
        .test-box {
            width: 1000px;
            margin: 0 auto;
        }

        .test-box-list li span {
            display: inline-block;
            padding: 5px 8px;
            margin: 0 0 0 10px;
            border-radius: 5px;
            cursor: pointer;
        }
        .test-box-list li span.active {
            background-color: green;
            color: #fff;
        }
    </style>
</head>

<body>

    <div class="test-box">
        <h3>选择题</h3>
        <ul class="test-box-list">
            <li>
                <p>1. 以下命名不符合规范的是?</p>
                <div> 
                    <span data-answer="A" data-index="0" class="opt">A. 1box </span> 
                    <span data-answer="B" data-index="0" class="opt">B. _box</span> 
                    <span data-answer="C" data-index="0" class="opt">C. $box</span> 
                    <span data-answer="D" data-index="0" class="opt">D. box1</span> </div>
            </li>
            <li>
                <p>2. 以下谁是引用数据类型?</p>
                <div> 
                    <span data-answer="A" data-index="1" class="opt">A. var str = 'hello'</span> 
                    <span data-answer="B" data-index="1" class="opt">B. var num = 101</span> 
                    <span data-answer="C" data-index="1" class="opt">C. var arr = []</span> 
                    <span data-answer="D" data-index="1" class="opt">D. var isPc= true</span> 
                </div>
            </li>
            <li>
                <p>3. 以下哪个是IE浏览器的内核?</p>
                <div> 
                    <span data-answer="A" data-index="2" class="opt">A. trident内核</span> 
                    <span data-answer="B" data-index="2" class="opt">B. gecko内核</span> 
                    <span data-answer="C" data-index="2" class="opt">C.Blink内核 </span> 
                    <span data-answer="D" data-index="2" class="opt">D.webkit内核</span> 
                </div>
            </li>
            
        </ul>
    </div>


    <script>
        // 要求：
            // 同一选择题，点击当前的选项，设置其背景高亮，非当前点击选项移除高亮
            // 根据自定义属性值，把点击选中的答案，有序添加到数组中 ，例如： ["A","C","D"]

        // 思考：
            // 需要获取哪些标签?给哪些把绑定事件
            // 如何记录选中的答案?数组是有序的数据集合


        // 编码：
            // 1.0 获取页面相关的元素
            var testBoxList = document.querySelector(".test-box-list");
            // 定义数组 用于记录答案
            var result = [];
            // 2.0 事件委托
            testBoxList.addEventListener("click",function(event){
                // 事件源
                var ele = event.target;
                // 获取自定义属性值
                var answer = ele.dataset.answer;
                var index = ele.dataset.index;
                // 判断点击的标签是否为答案的选项
                if(answer == undefined || index == undefined){
                    // 如果不是选项 ，直接终止代码
                    // console.log("不是选项");
                    return ;
                }
                //转number类型
                index = index - 0;
                // 通过数组的索引值存取数据
                result[index] = answer;
                // console.log(result);
                // 获取其父元素
                var parentEl =  ele.parentElement
                // 获取parentEl的所有子元素
                var spans = parentEl.children;
                // var spans = parentEl.querySelectorAll("span");
                // console.log(spans);

                // 循环标签数组
                for(var i = 0 ; i < spans.length ; i ++){
                    // 移除类名
                    spans[i].className="opt";
                }
                // 给当前点击的标签设置类名
                ele.className="opt active";

                // 处理答案数组
                if(result.length == 3){
                    // 打印答案
                    console.log(result);
                }
            })

    </script>
</body>

</html>